<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<!-- 当前套餐 -->
		<u-form
				labelPosition="left"
				:model="form"
				style="background-color: #ffffff;font-size: 5rpx;margin: 10rpx;padding: 10rpx;"
				ref="uForm">
<!-- 			<u-form-item prop="subjectName" label="ID" borderBottom>
				{{form.subjectId}}
			</u-form-item> -->
			<view style="text-align: center;font-size: 30rpx;font-weight: bold;">
					{{form.subjectName}}
			</view>
			
			<u-form-item prop="desp" label="名称" borderBottom>
				<u-input v-model="form.taskName" :disabled="notCanEdit()" :border="true"/>
			</u-form-item>
			<u-form-item prop="desp" label="描述" borderBottom>
				<u-input v-model="form.desp" :disabled="notCanEdit()" type="textarea" :border="true" :height="100" autoHeight/>
			</u-form-item>
			<u-form-item prop="ddate" label="时间:" borderBottom>
				<view style="text-align: center;" @click="showDate = true">
					<span>{{form.fireDate}}</span>至<span>{{form.demandDate}}</span>
					<span style="margin-left: 20rpx;">总共:{{computeStrDate(form.fireDate,form.demandDate)}}天</span>
				</view>
				<u-calendar v-model="showDate" max-date="2050-01-01"  mode="range" @change="changeDate" ></u-calendar>
			</u-form-item>
			<u-form-item prop="headUser" label-width="120" label="负责人" borderBottom>
				<u-tag :text="item.nickName" type="success" v-bind:key="index" v-for="(item,index) in form.headUsers" closeable  @close="subHeadUser(index)" ></u-tag>
				<u-icon name="plus-circle" color="#2979ff" size="50" @click="addHead" v-if="!notCanEdit()" style="margin-left: 25rpx;"></u-icon>
			</u-form-item>
			<u-form-item prop="copyUser" label-width="120" label="订阅人" borderBottom>
				<u-tag :text="item.nickName" v-bind:key="index" v-for="(item,index) in form.copyUsers" closeable @close="subCopyUser(index)"></u-tag>
				<u-icon name="plus-circle" color="#2979ff" size="50"  @click="addCopy"  v-if="!notCanEdit()" style="margin-left: 25rpx;"></u-icon>
			</u-form-item>
			<u-form-item prop="status" label-width="120" label="状态" borderBottom>
				<u-radio-group 
					v-model="form.status">
					<u-radio 
						v-for="(ent, index) in list" :key="index" 
						:name="ent.name"
						:disabled="notCanEdit()"
					>
						{{ent.name}}
				</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<u-row gutter="32" class="bottom-box" justify="center">
			<u-col span="10">
				<view><u-button type="primary" shape="circle" :disabled="notCanEdit()" @click="submit">确定</u-button></view>
			</u-col>
		</u-row>
		<u-popup v-model="headShow" border-radius="20" mode="bottom" height="1000rpx">
			<view style="margin: 20rpx;">
				<u-search placeholder="用户名称" focus v-model="serchVal" @search="search()" @change="search()" @custom="search"></u-search>
				<scroll-view scroll-y="true" style="height: 700rpx;">
					<view>
						<view v-for="(item,index) in userList" :key="index">
							<u-cell-item icon="man-add" :title="item.nickName"  @click="addHeadUser(index)"></u-cell-item>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="copyShow" border-radius="20" mode="bottom" height="800rpx">
			<view style="margin: 20rpx;">
				<u-search placeholder="用户名称" focus v-model="serchVal" @search="search()" @change="search()" @custom="search"></u-search>
				<scroll-view scroll-y="true" style="height: 700rpx;">
					<view>
						<view v-for="(item,index) in userList" :key="index">
							<u-cell-item icon="man-add" :title="item.nickName" @click="addCopyUser(index)"></u-cell-item>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
		data() {
			return {
			serchVal:'',
			yUsername:uni.getStorageSync('username')||'',
			headShow:false,
			copyShow:false,
			showDate: false,
			userList:[],
			subject:{
				subjectId:undefined,
				desp:'',
				subjectName:'',
				fireDate:this.$u.timeFormat(new Date(),'yyyy-mm-dd'),
				demandDate:this.$u.timeFormat(new Date(),'yyyy-mm-dd'),
				headUsers:[],
				copyUsers:[],
			},
			form:{
				subjectId:undefined,
				desp:'',
				status:'新建',
				subjectName:'',
				fireDate:this.$u.timeFormat(new Date(),'yyyy-mm-dd'),
				demandDate:this.$u.timeFormat(new Date(),'yyyy-mm-dd'),
				headUsers:[],
				copyUsers:[],
			},
			rules: {
				'form.subjectName':{
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'form.desp':{
					type: 'string',
					required: true,
					message: '请填写描述',
					trigger: ['blur', 'change']
				}
			},
			list: [
			{
				name: '新建',
			},{
				name: '执行中'
			}, 
			{
				name: '暂停',
			}, 
			{
				name: '已完成',
			}, 
			{
				name: '取消',
			}],
			current: 0,
			status: 'loadmore',
			iconType: 'circle',
			isDot: false,
			loadText: {
						loadmore: '点击加载更多',
						loading: '正在加载...',
						nomore: '没有更多了'
			},
			}
		},
		created(){
		},
		onLoad(option){
			this.search()
			if(option.taskId){
				this.getTaskById(option.taskId)
			}
			if(option.subjectId){
				this.getSubjectById(option.subjectId)
			}
		},
		methods: {
			getTaskById(taskId){
				this.$u.api.getTask(taskId).then(res=>{
					this.form = res.data
				})
			},
			getSubjectById(subjectId){
				this.$u.api.getSubject(subjectId).then(res=>{
					this.subject = res.data
					this.form.subjectId = this.subject.subjectId
					this.form.subjectName = this.subject.subjectName
				})
			},
			change(index) {
				this.current = index;
			},
			changeDate(e){
				this.form.fireDate = e.startDate
				this.form.demandDate = e.endDate
			},
			search(){
				  const query = {
					pageNum: 1,
					pageSize: 10,
					nickName:this.serchVal
				  }
				this.$u.api.listUser(query).then(res=>{
					this.userList = res.rows
				})
			},
			computeStrDate(str1,str2){
				return this.GetDate(str1,str2,'day')
			},
			computeNewDate(str1){
				return this.GetDate(str1,this.$u.date(new Date(),'yyyy-mm-dd'),'day')
			},
			GetDate(startTime, endTime, diffType) {
			    startTime = startTime.replace(/-/g, "/");
			    endTime = endTime.replace(/-/g, "/");
			    diffType = diffType.toLowerCase();
			    var sTime = new Date(startTime);      //开始时间
			    var eTime = new Date(endTime);  //结束时间
			    //作为除数的数字
			    var divNum = 1;
			    switch (diffType) {
			        case "second":
			            divNum = 1000;
			            break;
			        case "minute":
			            divNum = 1000 * 60;
			            break;
			        case "hour":
			            divNum = 1000 * 3600;
			            break;
			        case "day":
			            divNum = 1000 * 3600 * 24;
			            break;
			        default:
			            break;
			    }
			    return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(divNum));
			},
			addHead(){
				this.headShow = true
			},
			addCopy(){
				this.copyShow = true
			},
			addHeadUser: function(e) {
			  const user = this.userList[e];
			  if(!this.form.headUsers.some(item=>user.userName === item.userName)){
				const headUsers = [...this.form.headUsers,user]
				this.form.headUsers = headUsers;
			  }
			  this.headShow = false
			},
			subCopyUser:function(e){
			  const users = [...this.form.copyUsers]
			  users.splice(e,1)
			  this.form.copyUsers = users;
			},
			subHeadUser: function(e) {
			  const users = [...this.form.headUsers]
			  users.splice(e,1)
			  this.form.headUsers = users;
			},
			addCopyUser: function(e) {
			  const user = this.userList[e];
			  if(!this.form.copyUsers.some(item=>user.userName === item.userName)){
				const copyUsers = [...this.form.copyUsers,user]
				this.form.copyUsers = copyUsers;
			  }
			  this.copyShow = false
			},
			submit:function(){
				let strheadUser = "";
				this.form.headUsers.forEach(item=>{
				strheadUser += item.userName+","
				})
				this.form.headUser = strheadUser
				let strCopyUser = "";
				console.log(this.form.copyUsers)
				this.form.copyUsers.forEach(item=>{
				strCopyUser += item.userName+","
				})
				this.form.ddate = this.$u.timeFormat(new Date(),'yyyy-mm-dd')
				this.form.copyUser = strCopyUser
				this.form.rate = 0
				this.form.createTime = undefined;
				this.form.status = '新建';
				this.form.subjectNo = this.subject.subjectNo
				if (this.form.taskId != null) {
				  this.$u.api.updTask(this.form).then(res => {
					  if(res.code == 200){
						this.$u.toast("修改成功");
						uni.navigateBack({
						   success: (res) => {
							  }
						})
					  }else{
						this.$u.toast(res.msg);
					  }
				  }).finally(() => {
				  });
				} else {
				  this.$u.api.addTask(this.form).then(res => {
					  if(res.code == 200){
						  this.$u.toast("新增成功");
						  uni.navigateBack()
					  }else{
						   this.$u.toast(res.msg);
					  }
				  }).finally(() => {
					  
				  });
				}
			},
			notCanEdit(){
				const obj = this.form
			  if(this.yUsername == 'admin'){
				return false;
			  }
			  return (obj.createBy != this.yUsername
			  && obj.headUser?.indexOf(this.yUsername+',') < 0)
			   && obj.taskId;
			}
			
			
		}

	}
</script>
<style lang="scss" scoped>
	
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.apply-text{
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.user-images{
	width: 28px;
	height:28px;
	margin-right: 8px;
}
.apply-list-foot{
	font-size: 28rpx;
}
.personnel-list{
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	.personnel-user{
		position: relative;
		margin: 5px 9px 0;
	}
	.user-images{
		width: 48px;
		height:48px;
		margin-right:0;
		
	}
	.iconfont{
		position: absolute;
		top:-12px;
		right:-5px;
		color: #FE0100;
	}
}
</style>
